<template>
  <div class="choose-user">
    <BasicModal
      wrapClassName="choose-user-modal"
      @register="registerModal"
      showFooter
      hid
      :title="title"
      :width="width"
      @ok="handleSubmit"
      @cancel="handleClose"
      :show-cancel-btn="false"
      @open-change="handleVisibleChange"
    >
      <div class="page-main" v-loading="loadingRef">
        <div class="left">
          <!--   :clickRowToExpand="treeCheck" -->
          <BasicTree
            search
            show-icon
            defaultExpandAll
            :check-strictly="treeCheck"
            :checkable="treeCheck"
            treeWrapperClassName="h--[calc(100vh-500px)] overflow-auto"
            :treeData="treeData"
            :checkedKeys="selectedKeys"
            :fieldNames="{
              title: 'name',
              key: !general ? 'id' : 'key',
            }"
            @select="handleTreeSelect"
            @check="handleTreeCheck"
            ref="asyncExpandTreeRef"
          >
            <template #icon="{ level }">
              <img :src="level_1" v-if="[0, 1].includes(level)" />
              <img :src="level_3" v-else-if="level === 2" />
            </template>
          </BasicTree>
        </div>
        <template v-if="(sceneType && sceneType.length > 1) || general">
          <div v-if="comprehensiveIds.includes(nowSelectId)" class="mid mid-top">
            <BasicTree
              search
              style="flex: 1"
              show-icon
              defaultExpandAll
              :check-strictly="true"
              :checkable="true"
              treeWrapperClassName="h--[calc(100vh-500px)] overflow-auto"
              :treeData="renderList"
              :checkedKeys="selectedMidKeys"
              :fieldNames="{ title: 'name', key: 'id' }"
              @check="handleMidTreeCheck"
              ref="midTreeRef"
            >
              <template #icon="{ level }">
                <img :src="level_1" v-if="[0, 1].includes(level)" />
                <img :src="level_3" v-else-if="level === 2" />
              </template>
            </BasicTree>
          </div>
          <div class="mid" v-else>
            <div class="mid-top">
              <div>
                <a-input
                  placeholder="请输入名称"
                  v-model:value="searchText"
                  allowClear
                  @change="handleSearchChange"
                >
                  <template #prefix>
                    <img :src="searchIcon" style="width: 14px" />
                  </template>
                </a-input>
              </div>
              <div class="check-box">
                <Checkbox v-model:checked="checkAll" @change="onCheckAllChange">全选</Checkbox>
              </div>
            </div>
            <div class="overscroll-box">
              <template v-if="nowNode">
                <div class="person-box" v-if="renderList.length">
                  <div class="item" v-for="(item, index) in renderList" :key="index">
                    <Checkbox @change="onChangeItem" :id="item.customId" :checked="item.checked">{{
                      item.name
                    }}</Checkbox>
                  </div>
                </div>
                <div class="no-data" v-else>暂无数据</div>
              </template>

              <div class="no-data" v-else>请先选择左侧{{ SceneTypeEnumText[sceneType[0]] }}！</div>
            </div>
            <div class="mid-bottom">
              <RadioGroup
                v-model:value="currentValue"
                style="width: 100%; display: flex"
                @change="onChangeRadio"
              >
                {{ selectArr }}
                <div class="check-item" v-for="item in selectArr" :key="item.type">
                  <Radio :value="item.sceneType">
                    <span>只看{{ SceneTypeEnumText[item.type] }}</span></Radio
                  >
                </div>
              </RadioGroup>

              <!-- <div class="check-item" style="cursor: default"> </div> -->
            </div>
          </div>

          <!-- 已选数据展示 -->
          <div class="right">
            <div class="top" v-if="selectedUsers.length">
              <div class="item" v-for="(item, index) in selectedUsers" :key="index">
                <span>{{ filterName(item) }}</span>
                <div class="close-btn" @click="deleteUser(item)">
                  <img :src="closeImg" />
                </div>
              </div>
            </div>
            <div v-else class="please-choose-person">请选择{{ SceneTypeEnumText[type] }}！</div>

            <div class="bottom">
              <div class="bottom-left">
                已选
                <span style="color: rgba(43, 99, 161, 1)">{{ selectedUsers.length }}</span
                >个{{ SceneTypeEnumText[type] }}
              </div>
              <div @click="clearAllSelected" class="clear-all">清空</div>
            </div>
          </div>
        </template>
      </div>
    </BasicModal>

    <Select
      v-bind="$attrs"
      :class="{
        'HChooseUser-tag': !disabled,
      }"
      placeholder="请选择"
      mode="tags"
      :token-separators="[',']"
      v-model:value="activeKeys"
      disabled
      @click="showModal"
    />
  </div>
</template>
<script lang="ts" setup name="HChooseUser">
  import { ref, computed, unref, nextTick, toRefs, watch } from 'vue';
  import propsObj from './props';
  import { Select, Checkbox, Radio, RadioGroup } from 'ant-design-vue';
  // 图片
  import searchIcon from '/@/assets/images/search-icon.png';
  import level_1 from '/@/assets/images/choose-person-level-1.png';
  import level_3 from '/@/assets/images/choose-person-level-3.png';
  import closeImg from '/@/assets/images/close-blue.png';

  import { BasicModal, useModal } from '/@/components/Modal';
  import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
  import { BasicTree, TreeActionType } from '/@/components/Tree';
  import { debounce, cloneDeep } from 'lodash-es';

  import { CommonParams } from '/@/api/admin/model/accountModel';
  import { CommonAddressList } from '/@/api/admin/user';
  import { isArray } from '/@/utils/is';

  import {
    SceneTypeEnum,
    SceneTypeEnumText,
    GetRenderList,
    TreeDataListObject,
    ListItem,
    OrgTypeValue,
    SceneType,
  } from './types';

  import { useMessage } from '/@/hooks/web/useMessage';

  const props = defineProps(propsObj);
  const emit = defineEmits(['update:value', 'change']);

  const selectedMidKeys = ref([]);

  const comprehensiveIds: string[] = [
    'deptId',
    // 'roleId',
    // 'userId',
    // 'postId',
    // 'drafterId',
    // 'nowUserId',
  ];
  const loadingRef = ref(true);

  const currentValue = ref(8);

  const nowNode = ref('');
  let nowKey = [];

  const nowSelectId = ref<string>('');

  const { fullPath, sceneType, addressType, ids } = toRefs(props);
  const type = unref(sceneType)[unref(sceneType).length - 1];

  const { createMessage } = useMessage();

  const treeData = ref<Array<TreeDataItem>>([]);
  const userList = ref<Array<any>>([]);
  const renderList = ref<Array<any>>([]);

  const selectedUsers = ref<any>([]);
  const selectedDepts = ref<any>([]);
  const checkAll = ref<boolean>(false);
  // computed
  const general = unref(sceneType).length && unref(sceneType)[0].indexOf('GENERAL') > -1;
  const title = computed(() => `${SceneTypeEnumText[type]}选择`);
  const treeCheck = computed(() => !(unref(sceneType).length > 1) && !general);
  const width = computed(() => {
    if (unref(sceneType).length > 1 || general) return '1000px';
    return '480px';
  });

  const activeKeys = ref<string[]>([]);
  const midTreeRef = ref<any>(null);
  const selectArr = ref([]);

  const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
  const searchText = ref('');
  const selectedKeys = ref<any>([]);

  let setItem: any[] = [];

  const filterName = (data) => {
    let str = data;
    if (data) {
      if ([-1, -2].includes(data.orgType)) {
        return data.parentTitle;
      }
      if (unref(fullPath)) {
        const strArr = data.name.split('-');
        str = strArr[strArr.length - 1];
      } else {
        str = data.name;
      }
    }
    return str;
  };

  const [registerModal, { openModal, closeModal }] = useModal();

  function getFindItem(data, item, type = 'find') {
    return data[type]((user) => {
      return user.customId == item.customId;
    });
  }
  // watch
  watch(
    () => props.value,
    (v) => {
      if (v && isArray(v)) {
        if (!(unref(sceneType).length > 1) && !general) {
          selectedDepts.value = v;
        } else {
          setItem = v;
        }
        activeKeys.value = v.map((el) => el.name);
      }
    },
    {
      immediate: true,
    },
  );

  // 全选
  const onCheckAllChange = (val) => {
    const { checked } = val.target;
    unref(userList).forEach((i) => {
      i.checked = checked;
      if (checked) {
        const obj = getFindItem(unref(selectedUsers), i);
        if (!obj) {
          selectedUsers.value.push(i);
        }
      } else {
        const index = getFindItem(unref(selectedUsers), i, 'findIndex');
        if (index > -1) {
          selectedUsers.value.splice(index, 1);
        }
      }
    });
  };

  // 单选
  const onChangeItem = (val) => {
    val.target.customId = val.target.customId || val.target.id;

    const index2 = getFindItem(unref(renderList), val.target, 'findIndex');

    if (props.maxSelect <= selectedUsers.value.length && val.target.checked) {
      unref(renderList)[index2].checked = false;
      createMessage.warn(`最多只能选择${props.maxSelect}个${SceneTypeEnumText[type]}`);
      return;
    }
    if (index2 > -1) {
      unref(renderList)[index2].checked = val.target.checked;
      if (val.target.checked) {
        const obj = getFindItem(unref(userList), val.target);

        selectedUsers.value.push(obj);
      } else {
        const index = getFindItem(unref(selectedUsers), val.target, 'findIndex');

        if (index > -1) {
          unref(renderList)[index2].checked = false;
          selectedUsers.value.splice(index, 1);
        }
      }
      allSelectCheckIcon();
      return;
    }
    selectedUsers.value = selectedUsers.value.filter((i) => i.customId !== val.target.customId);
  };

  function handleTreeCheck(target, { node }) {
    if (props.maxSelect <= selectedDepts.value.length && !node.checked) {
      createMessage.warn(`最多只能选择${props.maxSelect}个${SceneTypeEnumText[type]}`);
      target.checked.pop();
      selectedKeys.value = target.checked;
      return;
    }
    let Ptitle = getParentTitle(node).Ptitle;

    if (node.checked) {
      selectedDepts.value = selectedDepts.value.filter((i) => i.id !== node.id);
    } else {
      selectedDepts.value = [
        ...selectedDepts.value,
        {
          id: node.id,
          name: unref(fullPath) ? `${Ptitle.join('-')}` : node.title,
          code: node.code,
          type: node.type,
          weight: node.type,
        },
      ];
      selectedDepts.value = [...new Set(selectedDepts.value.map((i) => JSON.stringify(i)))].map(
        (i) => JSON.parse(i as string),
      );
    }
  }

  function getParentTitle(node) {
    let Ptitle: string[] = [];
    let ids: string[] = [];
    const recursionTitle = (node) => {
      node.title && Ptitle.unshift(node.title);
      node.id && ids.unshift(node.id);
      if (node.parent) {
        node.parent.node.title && Ptitle.unshift(node.parent.node.title);
        node.parent.node.id && ids.unshift(node.parent.node.id);

        node.parent.parent && recursionTitle(node.parent);
      } else {
        node.node && Ptitle.unshift(node.node.title);
        node.node && ids.unshift(node.node.id);
      }
      return {
        Ptitle,
        ids,
      };
    };
    recursionTitle(node);
    return {
      Ptitle,
      ids,
    };
  }

  function handleTreeSelect(key, data, sceneTypes = unref(currentValue)) {
    if (!data.selected) {
      renderList.value = [];
      userList.value = [];
      nowNode.value = '';
      return;
    }
    loadingRef.value = true;
    const { node } = data;

    nowNode.value = data;
    nowKey = key;
    selectArr.value = node.selectArr || [];
    nowSelectId.value = node.id;
    let Ptitle = getParentTitle(node).Ptitle;
    const customId = getParentTitle(node).ids;
    let orgType: number | null = null;
    if (!(unref(sceneType).length > 1) && !general) {
      loadingRef.value = false;
      return;
    }
    if (!key[0]) return;
    let obj = [{ [SceneTypeEnum[unref(sceneType)[0]]]: unref(nowSelectId) }, unref(sceneType)[1]];
    if (general) {
      // 综合选
      const ids: string[] = ['deptId', 'roleId', 'userId', 'postId', 'drafterId', 'nowUserId'];
      if (ids.includes(unref(nowSelectId))) {
        obj = [{}, SceneTypeEnum[node.type]];
        orgType = OrgTypeValue[unref(nowSelectId)] || null;
      } else {
        obj = [{ [node.type]: unref(nowSelectId) }, SceneTypeEnum[sceneTypes]];
      }
    }

    getAddressListFn(obj[0], obj[1] as SceneType, true, Ptitle, orgType as number, customId);
  }

  function handleMidTreeCheck(target, { node }) {
    if (props.maxSelect <= selectedUsers.value.length && !node.checked) {
      createMessage.warn(`最多只能选择${props.maxSelect}个${SceneTypeEnumText[type]}`);
      target.checked.pop();
      selectedMidKeys.value = target.checked;
      return;
    }
    const Ptitle = getParentTitle(node).Ptitle;
    const ids = getParentTitle(node).ids;

    const { code, id, title, orgType, type: types, weight, parentId } = node;
    if (node.checked) {
      selectedMidKeys.value = selectedMidKeys.value.filter((i) => i !== id);
      selectedUsers.value = selectedUsers.value.filter((i) => i.customId !== ids.join('-'));
    } else {
      selectedUsers.value.push({
        code,
        id,
        customId: ids.join('-'),
        name: title,
        orgType,
        parentTitle: Ptitle.join('-'),
        type: types,
        weight,
        parentId,
        customType: 'dept',
      });
      selectedMidKeys.value.push(id);
    }
  }

  function showModal() {
    if (props.disabled) return;
    openModal();
    nextTick(() => {
      getTree()?.expandAll(true);
      if (!(unref(sceneType).length > 1) && !general) {
        selectedKeys.value = props.value?.map((el) => el.id) || [];
        selectedDepts.value = props.value;
      } else {
        selectedUsers.value = cloneDeep(setItem);
        if (general) {
          selectedMidKeys.value = selectedUsers.value.map((i) => i.id);
        }
        resetCheckedStatus(setItem);
      }
    });
  }

  function handleSubmit() {
    let data = cloneDeep(unref(selectedDepts));
    if (unref(sceneType).length > 1 || general) {
      data = cloneDeep(unref(selectedUsers));
      if (unref(fullPath)) {
        data = data.map((i) => {
          return { ...i, name: i.parentTitle || i.name };
        });
      } else if (general) {
        data = data.map((i) => {
          const prefix = i.customId.split('_')[0];
          if (['nowUserId', 'drafterId'].includes(prefix)) {
            return { ...i, name: i.parentTitle };
          }
          return i;
        });
      }
    }
    if (props.minSelect > data.length && props.minSelect !== Infinity) {
      createMessage.warn(`最少需要选择${props.minSelect}个${SceneTypeEnumText[type]}`);
      return;
    }
    activeKeys.value = data.map((i) => i.name);
    setItem = data;

    emit('change', data);
    emit('update:value', data);
    closeModal();
  }

  function handleClose() {
    closeModal();
  }

  function arrayFlagLevel(array, level, selectArr = []) {
    if (!array || !array.length) return;
    array.forEach((item) => {
      item.level = level;
      item.title = item.name;
      item.selectArr = selectArr || [];
      item.orgType = item.orgType || null;
      if (item.children && item.children.length) {
        arrayFlagLevel(item.children || [], level + 1, item.selectArr);
      }
    });
  }

  function setParentTitle(data, parentTitle, orgType, customId) {
    let checkData = data;
    if (parentTitle) {
      checkData = data.map((i) => {
        return {
          ...i,
          customId: `${customId.join('_')}_${i.id}`,
          orgType: i.orgType || orgType || null,
          parentTitle: `${parentTitle.join('-')}-${i.name}`,
        };
      });
    }

    return checkData;
  }

  const handleSearchChange = debounce(() => {
    searchText.value = searchText.value.trim();
    renderList.value = unref(userList).filter(
      (i) => i.name && i.name.indexOf(unref(searchText)) !== -1,
    );
  }, 500);

  function getTree() {
    const tree = unref(asyncExpandTreeRef);
    if (!tree) {
      throw new Error('tree is null!');
    }
    return tree;
  }

  function deleteUser(item) {
    console.log(item);

    item.checked = false;
    const obj = {
      target: item,
    };

    if (comprehensiveIds.includes(nowSelectId.value) || item.customType === 'dept') {
      selectedMidKeys.value = selectedMidKeys.value.filter((i) => i !== item.id);
      selectedUsers.value = selectedUsers.value.filter((i) => i.customId !== item.customId);
      // midTreeRef.value.setCheckedKeys(unref(selectedMidKeys));
      return;
    }
    onChangeItem(obj);
  }

  function commonRequest(data, Ptitle?: string[], orgType?: number, customId?: string[]) {
    userList.value = setParentTitle(data || [], Ptitle, orgType, customId);

    renderList.value = userList.value;
    if (comprehensiveIds.includes(nowSelectId.value)) {
      arrayFlagLevel(userList.value, 0);
      nextTick(() => {
        midTreeRef.value?.expandAll(true);
        midTreeRef.value?.setCheckedKeys(unref(selectedMidKeys));
      });
    }

    if (!unref(selectedUsers).length) return;
    allSelectCheckIcon();
  }

  // 单选变化
  const onChangeRadio = () => {
    handleTreeSelect(nowKey, nowNode.value, unref(currentValue));
  };

  // 全选按钮控制
  const allSelectCheckIcon = () => {
    let count = 0;
    unref(renderList).forEach((i) => {
      const obj = getFindItem(unref(selectedUsers), i);
      if (obj) {
        i.checked = true;
        count++;
      }
    });

    checkAll.value = count == userList.value.length && count > 0;
  };

  // 处理综合选择树

  function comprehensive(data: TreeDataListObject) {
    let list: ListItem[] = [];
    if (data) {
      for (let i in data) {
        let obj = {};
        switch (i) {
          case 'postList':
            obj = {
              name: '岗位组',
              title: '岗位组',
              id: 'postId',
              type: 2,
              key: 'postId',
            };

            break;
          case 'roleList':
            obj = {
              name: '角色组',
              title: '角色组',
              id: 'roleId',
              type: 4,
              key: 'roleId',
            };
            break;
          case 'deptList':
            obj = {
              name: '部门组',
              title: '部门组',
              id: 'deptId',
              type: 1,
              key: 'deptId',
              selectArr: [
                { title: '人员', type: 'PERSON', sceneType: 8 },
                { title: '岗位', type: 'POST', sceneType: 2 },
              ],
            };

            arrayFlagLevel(data[i], 0, obj.selectArr);
            break;
        }

        obj['children'] = data[i];
        console.log(list);

        list.push(obj as ListItem);
      }
    }

    const common = [
      {
        name: '拟稿人的',
        title: '拟稿人的',
        id: 'drafterId',
        type: 2,
        key: 'drafterId',
      },
      {
        name: '当前处理人的',
        title: '当前处理人的',
        id: 'nowUserId',
        key: 'nowUserId',
        type: 2,
      },
      {
        name: '用户组',
        title: '用户组',
        id: 'userId',
        key: 'userId',
        type: 8,
      },
    ];

    return [...common, ...list];
  }

  async function getAddressListFn(
    orgInfo = {},
    sceneTypeParams = unref(sceneType)[0],
    isUser = false,
    PTitle?: string[],
    orgType?: number,
    customId?: string[],
  ) {
    if (!unref(sceneType).length) {
      throw new Error('请设置sceneType值, (取值：DEPT,POST,ROLE,PERSON,GENERAL)');
    }
    const params: CommonParams = {
      ids: unref(ids),
      orgInfo: orgInfo,
      sceneType: SceneTypeEnum[sceneTypeParams],
      addressType: unref(addressType),
    };

    const data = await CommonAddressList(params);
    let list: TreeDataItem[] = [];

    // 综合选
    if (sceneTypeParams.indexOf('GENERAL') > -1) {
      list = comprehensive(data);
      // arrayFlagLevel(list, 0);
      treeData.value = list;
      nextTick(() => {
        unref(asyncExpandTreeRef)?.expandAll(true);
      });
      loadingRef.value = false;

      return;
    } else {
      list = data[GetRenderList[sceneTypeParams]];
    }

    // 多选
    if (isUser) {
      commonRequest(list, PTitle, orgType, customId);
      loadingRef.value = false;
      return;
    }

    arrayFlagLevel(list, 0);
    treeData.value = list;
    loadingRef.value = false;
    nextTick(() => {
      unref(asyncExpandTreeRef)?.expandAll(true);
    });
  }

  function clearAllSelected() {
    selectedUsers.value = [];
    resetCheckedStatus(unref(selectedUsers));
    checkAll.value = false;
    selectedMidKeys.value = [];
  }

  // 勾选状态重置
  const resetCheckedStatus = (data: ListItem[]) => {
    let count = 0;
    unref(userList).forEach((i) => {
      const ids = data.map((el) => el.customId) || [];
      i.checked = unref(ids).includes(i.customId);
      if (i.checked) {
        count++;
      }
    });
    checkAll.value = count === selectedUsers.value.length && count > 0;
  };

  async function handleVisibleChange(visible) {
    if (visible) {
      await getAddressListFn();
      // userList.value = [];
    } else {
      // selectedDepts.value = [];
      // selectedKeys.value = [];
    }
  }
</script>

<style scoped lang="less">
  .page-main {
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #e9e9e9;
    display: flex;
    max-height: calc(100vh - 435px);

    .left {
      flex: 1;
      border-right: 1px solid #e9e9e9;
      padding: 12px;
      overflow-y: auto;

      .tree-box {
        margin-top: 8px;
      }
    }

    .mid {
      flex: 1;
      border-right: 1px solid #e9e9e9;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
        padding: 12px 12px 0 8px;

        .check-box {
          display: flex;
          align-items: center;
          cursor: pointer;
          user-select: none;

          span {
            margin-right: 8px;
          }
        }
      }

      .overscroll-box {
        flex: 1;
        // height: 400px;
        overflow-y: auto;

        .person-box {
          cursor: pointer;
          padding: 0 12px;
          user-select: none;

          .item {
            display: flex;
            justify-content: space-between;
            // padding: 9px 0 9px 4px;
            min-height: 32px;
            align-items: center;
            margin-bottom: 8px;

            :deep(.ant-checkbox-wrapper) {
              width: 100%;

              span {
                &:last-child {
                  margin-left: auto;
                }
              }
            }
            // span {
            //   flex: 1;
            //   margin-right: 8px;
            // }
          }
        }

        .no-data {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      &-bottom {
        display: flex;
        flex-wrap: wrap;

        width: 100%;

        .check-item {
          height: 36px;
          width: 50%;
          display: flex;
          align-items: center;
          padding: 12px;
          cursor: pointer;
          user-select: none;

          &:nth-child(1) {
            border: 1px solid #e9e9e9;
            border-left: none;
            border-bottom: none;
          }

          &:nth-child(2) {
            border: 1px solid #e9e9e9;
            border-left: none;
            border-right: none;
            border-bottom: none;
          }

          &:nth-child(3) {
            border-right: 1px solid #e9e9e9;
          }

          div {
            margin-right: 8px;
          }
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        flex: 1;
        overflow-y: auto;
        padding: 12px 12px 0 12px;

        .item {
          height: 32px;
          padding: 9px 12px;
          background: rgba(43, 99, 161, 0.05);
          border-radius: 2px 2px 2px 2px;
          border: 1px solid rgba(43, 99, 161, 0.3);
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .close-btn {
            cursor: pointer;
          }

          span {
            color: rgba(43, 99, 161, 1);
          }
        }
      }

      .please-choose-person {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 25px;
      }

      .bottom {
        display: flex;
        height: 37px;
        border-top: 1px solid #e9e9e9;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        color: rgba(43, 99, 161, 1);

        .bottom-left {
          color: #999999;
        }

        .clear-all {
          cursor: pointer;
        }
      }
    }
  }

  ::v-deep(.vben-tree-header) {
    border-bottom: none;
    padding: 0 0 10px 0;
  }

  ::v-deep(.HChooseUser-tag) {
    &.ant-select-disabled {
      .ant-select-selector {
        cursor: pointer !important;
        background: @component-background !important;

        input,
        .ant-select-selection-item {
          cursor: pointer !important;
        }
      }
    }
  }
</style>

<style lang="less">
  .choose-user-modal {
    .scroll-container {
      .scrollbar__wrap {
        margin-bottom: 0 !important;
      }
    }
  }
</style>
